MessageTray: style summary sources

Make summary sources look more clickable and highlight them when selected.
Highlighting the fully expanded summary source when selected matches the
highlighting in the top bar items and teaches the user that any part of the
expanded summary source can be clicked.

Based on the initial patches by Florian Müllner and Jonathan Strander.

https://bugzilla.gnome.org/show_bug.cgi?id=644788

diff --git a/data/Makefile.am b/data/Makefile.am
index 990f2325e807dfc41c4c4a6f6f8df404582dac0b..b0477194cd41c01814a97d75f033e5ffc2a4f259 100644 (file)
--- a/data/Makefile.am
+++ b/data/Makefile.am
@@ -49,6 +49,7 @@ dist_theme_DATA =                             \
        theme/separator-white.png               \
        theme/single-view-active.svg            \
        theme/single-view.svg                   \
+       theme/source-button-border.svg          \
        theme/toggle-off-us.svg                 \
        theme/toggle-off-intl.svg               \
        theme/toggle-on-us.svg                  \

diff --git a/data/theme/gnome-shell.css b/data/theme/gnome-shell.css
index 5cae9c23c0e5596a412407e5d1c5eb3eea5975d7..ccf3d91f3900818132390e036c965ae19dfb7aee 100644 (file)
--- a/data/theme/gnome-shell.css
+++ b/data/theme/gnome-shell.css
@@ -971,7 +971,7 @@ StTooltip StLabel {
 #message-tray {
     background-gradient-direction: vertical;
     background-gradient-start: rgba(0,0,0,0.01);
-    background-gradient-end: rgba(0,0,0,0.95);
+    background-gradient-end: rgba(0,0,0,0.82);
     height: 36px;
     color: white;
 }
@@ -1157,14 +1157,32 @@ StTooltip StLabel {
     padding: 2px 4px 0px 0px;
 }
 
+.summary-source-button {
+    color: #fff;
+    text-shadow: black 0px 2px 2px;
+}
+
 .summary-source-button:ltr {
-    padding-left: 4px;
-    padding-right: 16px;
+    padding-right: 12px;
+}
+
+.summary-source-button:selected .summary-source {
+    background-image: url("panel-button-highlight-narrow.svg");
+    border-image: url("source-button-border.svg") 10 10 0 1;
+}
+
+.summary-source-button:expanded:selected .summary-source {
+    background-image: none;
+    border-image: none;
+}
+
+.summary-source-button:expanded:selected {
+    background-image: url("panel-button-highlight-wide.svg");
+    border-image: url("source-button-border.svg") 10 10 0 1;
 }
 
 .summary-source-button:rtl {
-    padding-right: 4px;
-    padding-left: 16px;
+    padding-left: 12px;
 }
 
 .summary-source-button:last-child:ltr {
@@ -1175,6 +1193,11 @@ StTooltip StLabel {
     padding-left: 12px;
 }
 
+.summary-source {
+    padding-right: 4px;
+    padding-left: 4px;
+}
+
 .source-title {
     font-size: 9pt;
     font-weight: bold;

diff --git a/data/theme/source-button-border.svg b/data/theme/source-button-border.svg
new file mode 100644 (file)
index 0000000..6e5051e
--- /dev/null
+++ b/data/theme/source-button-border.svg
@@ -0,0 +1,74 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!-- Created with Inkscape (http://www.inkscape.org/) -->
+
+<svg
+   xmlns:dc="http://purl.org/dc/elements/1.1/"
+   xmlns:cc="http://creativecommons.org/ns#"
+   xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
+   xmlns:svg="http://www.w3.org/2000/svg"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+   width="21"
+   height="10"
+   id="svg2"
+   version="1.1"
+   inkscape:version="0.48.0 r9654"
+   sodipodi:docname="source-button-border.svg">
+  <defs
+     id="defs4" />
+  <sodipodi:namedview
+     id="base"
+     pagecolor="#000000"
+     bordercolor="#666666"
+     borderopacity="1.0"
+     inkscape:pageopacity="0"
+     inkscape:pageshadow="2"
+     inkscape:zoom="44.8"
+     inkscape:cx="8.704132"
+     inkscape:cy="5.7029946"
+     inkscape:document-units="px"
+     inkscape:current-layer="layer1"
+     showgrid="true"
+     showguides="true"
+     inkscape:guide-bbox="true"
+     inkscape:window-width="1600"
+     inkscape:window-height="1145"
+     inkscape:window-x="0"
+     inkscape:window-y="26"
+     inkscape:window-maximized="1"
+     guidetolerance="10000"
+     objecttolerance="10000">
+    <inkscape:grid
+       type="xygrid"
+       id="grid3792"
+       empspacing="10"
+       visible="true"
+       enabled="true"
+       snapvisiblegridlinesonly="true" />
+  </sodipodi:namedview>
+  <metadata
+     id="metadata7">
+    <rdf:RDF>
+      <cc:Work
+         rdf:about="">
+        <dc:format>image/svg+xml</dc:format>
+        <dc:type
+           rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
+        <dc:title></dc:title>
+      </cc:Work>
+    </rdf:RDF>
+  </metadata>
+  <g
+     inkscape:label="Layer 1"
+     inkscape:groupmode="layer"
+     id="layer1">
+    <rect
+       style="opacity:0.8;fill:#ffffff;fill-opacity:1;stroke-width:0.43599999;stroke-miterlimit:4;stroke-dasharray:none"
+       id="rect3796"
+       width="19"
+       height="2"
+       x="1"
+       y="8" />
+  </g>
+</svg>

diff --git a/js/ui/messageTray.js b/js/ui/messageTray.js
index ea21d494dd09e459ea3ef0b530047cbb6eb58578..22d15c5dc1ee16cbbbf4163ab5d1b62847229aae 100644 (file)
--- a/js/ui/messageTray.js
+++ b/js/ui/messageTray.js
@@ -910,6 +910,7 @@ SummaryItem.prototype = {
     _init: function(source) {
         this.source = source;
         this.actor = new St.Button({ style_class: 'summary-source-button',
+                                     y_fill: true,
                                      reactive: true,
                                      button_mask: St.ButtonMask.ONE | St.ButtonMask.TWO | St.ButtonMask.THREE,
                                      track_hover: true });
@@ -926,8 +927,8 @@ SummaryItem.prototype = {
         this._sourceTitleBin.child = this._sourceTitle;
         this._sourceTitleBin.width = 0;
 
-        this._sourceBox.add_actor(this._sourceIcon);
-        this._sourceBox.add_actor(this._sourceTitleBin, { expand: true });
+        this._sourceBox.add(this._sourceIcon, { y_fill: false });
+        this._sourceBox.add(this._sourceTitleBin, { expand: true, y_fill: false });
         this.actor.child = this._sourceBox;
         this.rightClickMenu = new St.BoxLayout({ name: 'summary-right-click-menu',
                                                  vertical: true });
@@ -1331,12 +1332,18 @@ MessageTray.prototype = {
         // Turn off ellipsization for the previously expanded item that is
         // collapsing and for the item that is expanding because it looks
         // better that way.
-        if (this._expandedSummaryItem)
+        if (this._expandedSummaryItem) {
+            // Ideally, we would remove 'expanded' pseudo class when the item
+            // is done collapsing, but we don't track when that happens.
+            this._expandedSummaryItem.actor.remove_style_pseudo_class('expanded');
             this._expandedSummaryItem.setEllipsization(Pango.EllipsizeMode.NONE);
+        }
 
         this._expandedSummaryItem = summaryItem;
-        if (this._expandedSummaryItem)
+        if (this._expandedSummaryItem) {
+            this._expandedSummaryItem.actor.add_style_pseudo_class('expanded');
             this._expandedSummaryItem.setEllipsization(Pango.EllipsizeMode.NONE);
+        }
 
         // We tween on a "_expandedSummaryItemTitleWidth" pseudo-property
         // that represents the current title width of the
@@ -1928,6 +1935,7 @@ MessageTray.prototype = {
         this._adjustSummaryBoxPointerPosition();
 
         this._summaryBoxPointerState = State.SHOWING;
+        this._clickedSummaryItem.actor.add_style_pseudo_class('selected');
         this._summaryBoxPointer.show(true, Lang.bind(this, function() {
             this._summaryBoxPointerState = State.SHOWN;
         }));
@@ -1954,6 +1962,8 @@ MessageTray.prototype = {
             this._summaryRightClickMenuClickedId = 0;
         }
 
+        if (this._clickedSummaryItem)
+            this._clickedSummaryItem.actor.remove_style_pseudo_class('selected');
         this._clickedSummaryItem = null;
         this._clickedSummaryItemMouseButton = -1;
     },